<template>
  <div>
    <h3>房号列表</h3>
    <input type="button" value="导出" class="btn btn-info" @click="exportFn" />
    <input type="file" @change="fn" />
    <input
      type="button"
      value="导入"
      class="btn btn-warning"
      @click="importFn"
    />
    房号名称:<input type="text" v-model="info.houseNoName" />
    <input type="button" value="查询" @click="getHouseNoList" />
    <input type="button" value="批量调整房态" @click="updateState" />
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td><input type="checkbox" v-model="checked" /></td>
          <td>Id</td>
          <td>房号名称</td>
          <td>房型名称</td>
          <td>房型图片</td>
          <td>房型价格</td>
          <td>房态</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list">
          <td><input type="checkbox" v-model="ids" :value="item.id" /></td>
          <td>{{ item.id }}</td>
          <td>{{ item.houseNoName }}</td>
          <td>{{ item.houseTypeName }}</td>
          <td>
            <img :src="item.photo" width="100" height="100" alt="" />
          </td>
          <td style="color: red">{{ item.price.toFixed(2) }}</td>
          <td>
            <span v-if="item.houseState == 1">空闲</span>
            <span v-if="item.houseState == 2">已入住</span>
            <span v-if="item.houseState == 3">已预约</span>
          </td>
          <td>
            <input type="button" value="修改" class="btn btn-primary" />
            <input type="button" value="删除" class="btn btn-danger" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

//获取房号列表向后端传递的参数
let info: any = reactive({
  pageIndex: 1,
  pageSize: 100,
  houseNoName: '',
  houseTypeId: '',
});

//声明变量存储后端返回的数据
let data: any = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
});

let checked: any = ref(false);
let ids: any = ref([]);

let excelObj = ref(null);

onMounted(() => {
  getHouseNoList();
});

//批量调整房态
const updateState = () => {
  console.log(ids.value);
  axios({
    url: '/api/HouseTypes/UpdateStateNo',
    method: 'put',
    params: {
      ids: ids.value.toString(),
    },
  })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};

//导入的第一步获取文件
const fn = (e: any) => {
  excelObj.value = e.target.files[0];
};

//导入的第二步导入
const importFn = () => {
  if (excelObj.value == null) {
    alert('请选择文件');
    return;
  }
  //将获取的文件转FormData格式
  let f = new FormData();
  f.append('file', excelObj.value);

  //发送网络请求
  axios({
    url: '/api/HouseTypes/ImportExcel',
    method: 'post',
    data: f,
  })
    .then((res) => {
      console.log(res);
      if (res.data > 0) {
        alert('导入成功');
        getHouseNoList();
      } else {
        alert('导入失败');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
//导出
const exportFn = () => {
  //不需要传参
  info.pageSize = 20;
  // location.href = 'http://localhost:5041/api/HouseTypes/ExportExcel';
  location.href = `http://localhost:5041/api/HouseTypes/ExportExcel?pageIndex=${info.pageIndex}&pageSize=${info.pageSize}&houseNoName=${info.houseNoName}`;
};

const getHouseNoList = () => {
  axios({
    url: '/api/HouseTypes/GetHouseNoList',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
